<template>
	<div class="myChart" ref="myChart" id="myChart" v-loading="loading"></div>
</template>

<script>
import * as Api from '@/api/index';
// import axios from 'axios';
// import DataSet from '@antv/data-set';
// import { registerInteraction } from '@antv/g2';
import { Treemap } from '@antv/g2plot';
import Axios from 'axios';

// import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
	data() {
		return {
			loading: false,
		};
	},
	computed: {},
	created() {},
	mounted() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			fetch('http://172.20.1.49:8099/G2plot')
				.then((res) => res.json())
				.then((fetchData) => {
					const data = {
						name: 'root',
						children: fetchData,
					};

					const treemapPlot = new Treemap('myChart', {
						data,

						// tooltip: {
						// 	formatter: (data) => {
						// 		return { name: data.name, value: data.brand };
						// 	},
						// },

						tooltip: {
							follow: true,
							enterable: true,
							offset: 5,
							customContent: (value, items) => {
								if (!items || items.length <= 0) return;
								const { data: itemData } = items[0];

								const tipcontainer = `
									display: grid;
									grid-template-rows:1fr 1fr 1fr ;
    								row-gap: 10px;
									padding: 5px 0;
								`;
								const tiptitle = `
									font-weight: bold;
									color: #CD661D;
								`;
								const tooltip_item = `
									color:#696969;
									display:grid;
									grid-template-columns:1fr 1fr;
									column-gap:10px
							
								`;

								return `<div class='tipcontainer' style="${tipcontainer}">
										<div class='tiptitle' style="${tiptitle}">
											${itemData.name}
										</div>
										<div class='tooltip-item' style="${tooltip_item}">
											<span>所属:</span>
											<span>
											${itemData.brand}
											</span>
										</div>
										<div class='tooltip-item' style="${tooltip_item}">
											<span>是否异常:</span>
											<span>
												${itemData.isError == '1' ? '异常' : '正常'}
											</span>
										</div>
									</div>
									`;
							},
						},

						rectStyle: (data) => {},
						colorField: 'brand',

						// 为矩形树图增加缩放,拖拽交互
						interactions: [
							{
								type: 'view-zoom',
							},
							{
								type: 'drag-move',
							},
							{
								type: 'element-highlight',
							},
							{
								type: 'legend-highlight',
							},
						],
						state: {
							// 设置 selected 激活状态的样式
							selected: {
								animate: {
									duration: 1000,
									easing: 'easeLinear',
									animation: 'grow-in-xy',
								},
								style: {
									fill:
										'r(0.5, 0.5, 1) 0:#FF6347 0.5:#7ec2f3 1:#1890ff',
									stroke: '#CDC9C9',
								},
							},
						},
					});

					treemapPlot.render();
					let selectState=()=>{
						treemapPlot.setState(
						'selected',
						(data) => data.isError === '1'
					);

					}
					selectState()
					treemapPlot.on('legend-item:click', (...args) => {
						selectState()
					});
					
					let fillColorArr = ['#FF6347', '#7ec2f3', '#1890ff'];
					setInterval(() => {
						let item = fillColorArr.shift();
						fillColorArr.push(item);
						treemapPlot.update({
							state: {
							// 设置 selected 激活状态的样式
							selected: {
								animate: {
									duration: 1000,
									easing: 'easeLinear',
									animation: 'grow-in-xy',
								},
								style: {
									fill:`r(0.5, 0.5, 1) 0:${fillColorArr[0]} 0.5:${fillColorArr[1]} 1:${fillColorArr[2]}`,
									stroke: '#CDC9C9',
								},
							},
						},
						
					});
					selectState()
					}, 5000);
					
				})
				.catch(() => {
					this.$message({
						showClose: true,
						message: '此页面正在施工!!!',
						type: 'error',
					});
				});
		},
	},
	watch: {},
	beforeDestroy() {},
};
</script>

<style scoped>
/* .body {
	height: 98vh;
	width:100vw;
	display: grid;
	justify-content: center;
	align-content: center;
} */
.myChart {
	width: 100%;
	height: 100%;
}

.tipcontainer {
}
.tiptitle {
	font-weight: bold;
	color: #e5d5c1;
}
/* .tooltip-item{
    
    display: flex;
    width: 100%;
    justify-content: space-between;
  } */
</style>
